import Draggable from './Draggable'

/**
 * 拖拽源组件，用于显示可用的表单项并处理点击事件
 * @param {Object} props - 组件属性
 * @param {Object} props.item - 当前表单项对象
 * @param {Function} props.onItemSelect - 表单项选择事件处理函数
 */
const DraggableItem = ({ item, onItemSelect }) => {
  return (
    <Draggable item={item}>
      <div
        className='w-150px mb8px p8px b-1px b-solid b-#e8e8e8 b-rd-4px bg-#fafafa flex items-center'
        onClick={e => {
          e.stopPropagation()
          e.preventDefault()
          onItemSelect(item)
        }}
      >
        {item.icon}
        <span className='ml8px'>{item.title}</span>
      </div>
    </Draggable>
  )
}

export default DraggableItem
